<template>
  <div class="doorSeen">
    <div class="doorSeen_title">现场记录</div>
    <div class="doorSeen_center">
      <div class="left">
        <!-- <input
          class="left_input"
          v-model="remarks"
          type="text"
          placeholder="上门记录"
        /> -->
        <div v-if="(user.isShop == 1 || user.isAgent == 1) && user.id == createdId" style="display: flex; flex: 1;">
          客户姓名：
          <input v-model="customerName" placeholder="请输入客户姓名" style="border: 1px solid #ccc;padding: 2px 5px;">
        </div>
        <el-input type="textarea" v-model="remarks" class="left_input" placeholder="上门记录" maxlength="200" show-word-limit
          autosize :rows="1">
        </el-input>
        <div class="left_tu">
          <el-upload ref="uupload" :action="$upLoad" :limit="9" :show-file-list="false" :before-upload="beforeUpload"
            :on-success="houseSuccess" :on-change="houseChage">
            <div class="zhanshi" style=" vertical-align: top;" @click.stop v-if="vehicleImage && vehicleImage.length">
              <div class="zhanshi_item" v-for="(i, j) in vehicleImage" :key="j" @mouseenter="immigration(i.id)"
                @mouseleave="shiftOut()">
                <video v-if="i.type == 2" :src="i.path" style="height: 150px; width: 150px" controls="controls">
                  您的浏览器不支持视频播放
                </video>
                <img v-else-if="i.type == 1" style="height: 150px; width: 150px" :src="i.path" alt="" />
                <div class="zhanshi_item_zz" @click.stop="" v-if="yiru == 'yiru' + i.id">
                  <img @click.stop="houseRemove(i)" src="../../../assets/bbcz/del01.png" alt="" />
                </div>
              </div>
            </div>
            <i v-if="vehicleImage && vehicleImage.length < 9" class="el-icon-plus kg"
              style="display:inline-block;vertical-align: top;color:#DDDDDD"></i>
          </el-upload>
        </div>
      </div>
      <div class="right">
        <div class="btn_bc" @click="submitSave()">保存</div>
        <div class="btn_qx" @click="doorSeenClick()">取消</div>
      </div>
    </div>
    <div class="doorSeen_title" style="margin-top:20px;">
      历史记录
      <div style="cursor: pointer;margin-right:20px;" @click="getMore">
        更多>
      </div>
    </div>
    <div class="doorSeen_center doorSeen_history">
      <div class="left" v-for="(item, index) in historyList" :key="index">
        <!-- <input
          class="left_input line1"
          :value="item.recordDescription"
          disabled="true"
          type="text"
          placeholder="上门记录"
        /> -->
        <!-- <el-input
          type="textarea"
          :value="item.recordDescription"
          :disabled="true"
          class="left_input"
          placeholder="上门记录"
          autosize
        ></el-input> -->

        <div style="margin: 20rpx 0" v-if="item.customerName">
          客户姓名:{{ item.customerName }}
        </div>
        <div class="history-record">{{ item.recordDescription }}</div>
        <div class="left_tu">
          <div class="zhanshi">
            <div class="zhanshi_item" v-for="(i, j) in item.imgvideo" :key="j" @mouseenter="immigration(j)"
              @mouseleave="shiftOut()">
              <video class="video" :ref="'video' + j" :id="'video' + j" v-if="i.type == 2" :src="i.path"
                style="height: 150px; width: 150px" controls="controls">
                您的浏览器不支持视频播放
              </video>
              <img class="img" v-else-if="i.type == 1" style="height: 150px; width: 150px" :src="i.path" alt="" />
              <div class="zhanshi_item_zz" @click.stop="" v-if="yiru == 'yiru' + j">
                <!-- <img

                    src="../../../assets/bbcz/del01.png"
                    alt=""
                  /> -->
                <span class="el-icon-zoom-in" v-if="i.type == 1" style="font-size:22px;color: #fff;"
                  @click.stop="preView(i)"></span>
                <span class="el-icon-full-screen" v-if="i.type == 2" @click.stop="houseVideoView(i, 'video' + i.id)"
                  style="color: white; font-size: 24px; margin-right: 12px"></span>
              </div>
            </div>
          </div>
        </div>
        <div style="text-align: right; margin-top: 7px;">
          {{ item.createDate }}
        </div>
      </div>
      <div v-if="historyList.length == 0" style="height: 450px;display:flex;justify-content: center;width:100%">
        <el-empty description="还没有上门记录呢"></el-empty>
      </div>
    </div>
  </div>
</template>

<script>
var count = 10086;
export default {
  props: {
    businessType: {
      type: Number | String,
      default: 1
    },
    uid: {
      type: Number | String,
      require: true
    },
    vt: {
      type: Number | String,
      default: 1
    },
    createdId: {
      type: Number | String,
      default: 1
    }
  },
  data() {
    return {
      customerName: '',
      historyList: [],
      remarks: "",
      Img: { type: "", url: "" },
      doorSeen: false,
      vehicleImage: [],
      dialogImageUrl: "",
      dialogVisible: false,
      yiru: "",
      user: {},
      loading: false,
      count: 10086
    };
  },
  created() {
    this.getUser();
    this.getHistory();
  },
  methods: {
    houseVideoView(i, ref) {
      // var videoList = this.houseImage
      //   .filter((item) => item.type == "video")
      //   .map((item) => item.path);
      //    var index = imgList.findIndex((item) => item == i.path);
      //  this.$refs[count].$el.requestFullscreen()
      //    videoList[index].path
      //

      this.fullScreen(ref);
    },
    fullScreen(ele) {
      // let element =this.$refs[ele]
      let element = document.getElementById(ele);
      this.Screen(element);
    },
    Screen(element) {
      if (element.requestFullscreen) {
        element.requestFullscreen();
      } else if (element.mozRequestFullScreen) {
        element.mozRequestFullScreen();
      } else if (element.msRequestFullscreen) {
        element.msRequestFullscreen();
      } else if (element.oRequestFullscreen) {
        element.oRequestFullscreen();
      } else if (element.webkitRequestFullscreen) {
        element.webkitRequestFullScreen();
      } else {
        var docHtml = document.documentElement;
        var docBody = document.body;
        // var videobox = document.getElementById("video");
        var cssText = "width:100%;height:100%;overflow:hidden;";
        docHtml.style.cssText = cssText;
        docBody.style.cssText = cssText;
        videobox.style.cssText = cssText + ";" + "margin:0px;padding:0px;";
        document.IsFullScreen = true;
      }
    },
    preView(i) {
      console.log(i);
      var index = this.historyList[0].imgvideo
        .filter(item => item.type == 1)
        .findIndex(item => i.path == item.path);
      this.$hevueImgPreview({
        multiple: true, // 开启多图预览模式
        nowImgIndex: index, // 多图预览，默认展示第二张图片
        imgList: this.historyList[0].imgvideo
          .filter(item => item.type == 1)
          .map(item => {
            if (item.type == 1) return item.path;
          }) // 需要预览的多图数组
      });
      console.log(
        index,
        this.historyList[0].imgvideo.map(item => {
          if (item.type == 1) return item.path;
        })
      );
    },
    getMore() {
      this.openUrl({
        path: "/my/bbcz/doorSeenHistory",
        query: {
          bid: this.businessType || 1,
          id: this.uid,
          vt: this.vt || ""
        }
      });
    },
    //判断用户是否登录，如果登录则查询是否收藏
    getUser() {
      let user = JSON.parse(localStorage.getItem("userInfo"));
      if (user != null) {
        this.loginstate = true;
        this.user = user;
      } else {
        this.loginstate = false;
      }
    },
    getHistory() {
      var url = "";
      var param = {};
      if (!this.businessType || +this.businessType == 1) {
        url = "/mob/iteration/queryHouseVisitedHistory";
        param = {
          userId: this.user.id,
          houseId: this.uid
        };
      } else if (+this.businessType == 2) {
        url = "/api/mobile/vehicleOwner/queryVisitedHistory";
        param = {
          userId: this.user.id,
          vehicleId: this.uid,
          businessType: 2
        };
      } else if (+this.businessType == 3) {
        url = "/api/mobile/personnelOwner/queryVisitedHistory";
        param = {
          userId: this.user.id,
          relatedBusiness: this.uid,
          visitType: 1
        };
      }
      this.$getHttp(url, param).then(res => {
        if (res.visitedHistory) {
          res.visitedHistory.remarks = JSON.parse(res.visitedHistory.remarks || '[]');
          console.log("1111", res.visitedHistory.remarks);
          res.visitedHistory.imgvideo = [];
          res.visitedHistory.remarks.map(item => {
            if (item.type == "image") {
              res.visitedHistory.imgvideo.push({
                type: 1,
                path: item.url
              });
            } else {
              res.visitedHistory.imgvideo.push({
                type: 2,
                path: item.url
              });
            }
          });
          console.log("1234", res.visitedHistory.imgvideo);

          //  console.log(res.visitedHistory.remarks);
          this.historyList = [res.visitedHistory];
        }
      });
    },
    doorSeenClick() {
      this.doorSeen = !this.doorSeen;
      this.$emit("close");
    },
    immigration(id) {
      // console.log("item.imgvideo", this.vehicleImage, this.historyList);
      this.yiru = "yiru" + id;
    },
    shiftOut() {
      this.yiru = "";
    },
    // 判断文件格式
    houseChage(file, fileLists) {
      let suffix = file.name.substring(file.name.lastIndexOf(".") + 1); //获取文件后缀名
      let suffixArray = ["jpg", "png", "jpeg", "gif"]; //限制的文件类型，根据情况自己定义
      // 1为图片，2为视频
      if (suffixArray.indexOf(suffix.toLowerCase()) == -1) {
        this.typegs = 2;
      } else {
        this.typegs = 1;
      }
    },
    beforeUpload(file, fileList) {
      if (file.size / (1024 * 1024) > 20) {
        // 限制文件大小
        this.$message.warning(`当前限制文件大小不能大于20M`);
        return false;
      }
      let suffix = file.name.substring(file.name.lastIndexOf(".") + 1); //获取文件后缀名
      let suffixArray = [
        "jpg",
        "png",
        "jpeg",
        "gif",
        "mp4",
        "flv",
        "avi",
        "mpg",
        "wmv",
        "3gp",
        "mov",
        "asf",
        "asx",
        "vob",
        "wmv9",
        "rm",
        "rmvb"
      ]; //限制的文件类型，根据情况自己定义
      if (suffixArray.indexOf(suffix.toLowerCase()) === -1) {
        this.$message({
          message: "文件格式错误",
          type: "error",
          duration: 2000
        });
        return false;
      }
      return true;
    },
    houseSuccess(response, file, fileList) {
      this.vehicleImage.push({
        id: file.uid,
        path: response.data[0].url,
        type: this.typegs
      });
      console.log(this.vehicleImage);
    },
    houseRemove(file, fileList) {
      var fileList = this.$refs.uupload.uploadFiles;
      for (var i = 0; i < this.vehicleImage.length; i++) {
        if (this.vehicleImage[i].id == file.id) {
          this.vehicleImage.splice(i, 1);
        }
        if (fileList[i].uid == file.id) {
          fileList.splice(i, 1);
        }
      }
      // console.log(this.vehicleImage);
      // console.log(this.$refs.uupload);
    },
    submitSave() {
      if (this.remarks.trim() == "" && this.vehicleImage.length === 0) {
        this.$message({
          message: "请填写上门记录或其他媒体资源！",
          type: "error",
          offset: 120,
          duration: 2000
        });
        return;
      }
      var recordPicture = [];
      var recordVideo = [];
      var arr = [];
      this.vehicleImage.map(item => {
        if (item.type == 2) {
          recordVideo.push(item.path);
          arr.push({ type: "video", url: item.path });
        } else {
          recordPicture.push(item.path);
          arr.push({ type: "image", url: item.path });
        }
      });

      let user = JSON.parse(localStorage.getItem("userInfo"));
      if (user != null) {
        if (this.loading) {
          return;
        }
        this.loading = true;
        var url = {};
        var param = {};
        if (!this.businessType || +this.businessType == 1) {
          url = "/mob/iteration/releaseHouseVisited";
          param = {
            customerName: this.customerName,
            noteTaker: user.id,
            recordHouse: this.$route.query.id,
            recordDescription: this.remarks,
            recordPicture: recordPicture.join("|"),
            recordVideo: recordVideo.join("|"),
            remarks: JSON.stringify(arr),
            businessType: 1
          };
        } else if (+this.businessType == 2) {
          url = "/api/mobile/vehicleOwner/releaseVisited";
          param = {
            customerName: this.customerName,
            noteTaker: user.id,
            recordVehicle: this.$route.query.id,
            recordDescription: this.remarks,
            recordPicture: recordPicture.join("|"),
            recordVideo: recordVideo.join("|"),
            remarks: JSON.stringify(arr),
            businessType: 2
          };
        } else if (+this.businessType == 3) {
          url = "/api/mobile/personnelOwner/increaseVisitedLook";
          param = {
            customerName: this.customerName,
            noteTaker: user.id,
            relatedBusiness: this.$route.query.id,
            recordDescription: this.remarks,
            recordPicture: recordPicture.join("|"),
            recordVideo: recordVideo.join("|"),
            remarks: JSON.stringify(arr),
            visitType: 1
          };
        }

        this.$postHttp(url, param).then(res => {
          if (res.code == 200) {
            this.mySuccessMessage(res.msg);
            this.loading = false;
            this.doorSeenClick();
            this.$emit("updataLook")
          } else {
            this.loading = false;
          }
        });
      }
    }
  }
};
</script>

<style lang="less" scoped>
.left {
  .left_input {
    // min-height: 58px;
    height: auto !important;
    box-sizing: border-box;
    padding-top: 13px;
    padding-bottom: 12px;

    /deep/textarea {
      border-width: 0;
      padding-left: 0px;
      padding-right: 0px;
      color: #999;
      font-size: 14px;
      font-weight: 500;
      word-break: break-all;
      resize: none;

      .el-input__count {
        bottom: 2px;
      }
    }
  }
}

.doorSeen {
  margin-bottom: 40px;
  margin-top: 24px;

  .doorSeen_title {
    font-size: 24px;
    font-weight: 600;
    color: #333333;
    margin-bottom: 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .doorSeen_center {
    box-sizing: border-box;
    width: 1200px;
    // height: 262px;
    background-color: #ffffff;
    border: 1px solid #e0e0e0;
    padding: 27px;
    display: flex;

    .left {
      width: 1000px;

      .left_input {
        width: 100%;
        height: 58px;
        border-bottom: 1px solid #e0e0e0;
        color: #999;
      }

      .left_tu {
        margin-top: 10px;

        .zhanshi {
          display: flex;
          align-items: center;
          flex-wrap: wrap;

          .zhanshi_item {
            width: 150px;
            height: 150px;
            position: relative;
            margin-right: 20px;
            margin-bottom: 10px;
            transition: all 0.5s;

            .zhanshi_item_zz {
              width: 100%;
              height: 100%;
              position: absolute;
              top: 0;
              left: 0;
              background-color: rgba(0, 0, 0, 0.7);
              display: flex;
              align-items: center;
              justify-content: center;

              img {
                width: 30px;
                height: 30px;
              }
            }
          }
        }

        .kg {
          width: 150px;
          height: 150px;
          border: 1px solid #e0e0e0;
          text-align: center;
          line-height: 150px;
        }
      }
    }

    .right {
      flex: 1;
      display: flex;
      align-items: flex-end;

      // justify-content: flex-end;
      .btn_bc {
        width: 80px;
        height: 50px;
        background-color: #64b6a8;
        border-radius: 6px;
        color: #fff;
        text-align: center;
        line-height: 50px;
        cursor: pointer;
        margin-right: 10px;
      }

      .btn_qx {
        color: #64b6a8;
        width: 80px;
        height: 50px;
        border: 1px solid #64b6a8;
        border-radius: 6px;
        text-align: center;
        line-height: 50px;
        cursor: pointer;
      }
    }
  }

  .doorSeen_history {
    .left {
      width: 100%;

      .zhanshi_item {
        width: 265px !important;
        height: 160px !important;
        border-radius: 12px 12px 12px 12px;
        overflow: hidden;
      }

      .left_tu {
        .zhanshi {
          .zhanshi_item {
            .video {
              width: 265px !important;
              height: 160px !important;
              background: #d9d9d9;
              border-radius: 12px 12px 12px 12px;
              overflow: hidden;
              opacity: 1;
              margin-right: 20px;
            }

            .img {
              width: 265px !important;
              height: 160px !important;
              background: #d9d9d9;
              border-radius: 12px 12px 12px 12px;
              overflow: hidden;
              opacity: 1;
              margin-right: 20px;
            }
          }
        }
      }
    }
  }
}

/deep/ .el-upload {
  display: flex;
  text-align: left;
  flex-wrap: wrap;
}

.history-record {
  word-break: break-all;
  // height: 28px;
  font-size: 20px;
  font-weight: 400;
  color: #333333;
  line-height: 28px;
  margin-bottom: 24px;
}
</style>
